{% extends 'car_system/base.html' %}

{% block title %}数据图表 - 汽车数据分析系统{% endblock %}

{% block content %}
<h2 class="mb-4"><i class="fas fa-chart-line text-primary me-2"></i> 汽车数据图表分析</h2>

<!-- 图表选项卡 -->
<ul class="nav nav-tabs mb-4" id="chartTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="brand-tab" data-bs-toggle="tab" data-bs-target="#brand-chart" type="button" role="tab" aria-controls="brand-chart" aria-selected="true">
            <i class="fas fa-trademark me-1"></i> 品牌分布
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="price-tab" data-bs-toggle="tab" data-bs-target="#price-chart" type="button" role="tab" aria-controls="price-chart" aria-selected="false">
            <i class="fas fa-money-bill-wave me-1"></i> 价格区间
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales-chart" type="button" role="tab" aria-controls="sales-chart" aria-selected="false">
            <i class="fas fa-chart-bar me-1"></i> 销量排行
        </button>
    </li>
</ul>

<!-- 图表内容 -->
<div class="tab-content" id="chartTabsContent">
    <!-- 品牌分布图表 -->
    <div class="tab-pane fade show active" id="brand-chart" role="tabpanel" aria-labelledby="brand-tab">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>品牌车型数量分布</h5>
            </div>
            <div class="card-body">
                <div id="brandPieChart" style="height: 500px;"></div>
            </div>
        </div>
    </div>
    
    <!-- 价格区间图表 -->
    <div class="tab-pane fade" id="price-chart" role="tabpanel" aria-labelledby="price-tab">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>价格区间分布</h5>
            </div>
            <div class="card-body">
                <div id="priceBarChart" style="height: 500px;"></div>
            </div>
        </div>
    </div>
    
    <!-- 销量排行图表 -->
    <div class="tab-pane fade" id="sales-chart" role="tabpanel" aria-labelledby="sales-tab">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>销量排行榜</h5>
            </div>
            <div class="card-body">
                <div id="salesBarChart" style="height: 500px;"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 品牌分布饼图
        const brandData = {{ brand_data_json|safe }};
        const brandChart = echarts.init(document.getElementById('brandPieChart'));
        
        const brandOption = {
            title: {
                text: '品牌车型数量分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                top: 'middle',
                data: brandData.map(item => item.brand_name)
            },
            series: [
                {
                    name: '品牌车型数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: brandData.map(item => ({
                        name: item.brand_name,
                        value: item.count
                    }))
                }
            ]
        };
        
        brandChart.setOption(brandOption);
        
        // 价格区间柱状图
        const priceData = {{ price_data_json|safe }};
        const priceChart = echarts.init(document.getElementById('priceBarChart'));
        
        const priceOption = {
            title: {
                text: '价格区间车型数量分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: priceData.map(item => item.label),
                axisLabel: {
                    interval: 0,
                    rotate: 30
                }
            },
            yAxis: {
                type: 'value',
                name: '车型数量'
            },
            series: [
                {
                    name: '车型数量',
                    type: 'bar',
                    data: priceData.map(item => item.count),
                    itemStyle: {
                        color: function(params) {
                            // 生成不同的颜色
                            const colorList = [
                                '#5470c6', '#91cc75', '#fac858', '#ee6666',
                                '#73c0de', '#3ba272', '#fc8452', '#9a60b4'
                            ];
                            return colorList[params.dataIndex % colorList.length];
                        }
                    },
                    label: {
                        show: true,
                        position: 'top'
                    }
                }
            ]
        };
        
        priceChart.setOption(priceOption);
        
        // 销量排行柱状图
        const salesData = {{ sales_data_json|safe }};
        const salesChart = echarts.init(document.getElementById('salesBarChart'));
        
        const salesOption = {
            title: {
                text: '车型销量排行榜 (Top 10)',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'value',
                name: '销量（台）'
            },
            yAxis: {
                type: 'category',
                data: salesData.map(item => item.series_name).reverse(),
                axisLabel: {
                    interval: 0,
                    width: 100,
                    overflow: 'truncate'
                }
            },
            series: [
                {
                    name: '月销量',
                    type: 'bar',
                    data: salesData.map(item => item.count).reverse(),
                    itemStyle: {
                        color: function(params) {
                            // 前三名使用不同颜色
                            const colors = ['#ee6666', '#fac858', '#91cc75'];
                            const index = salesData.length - 1 - params.dataIndex;
                            return index < 3 ? colors[index] : '#5470c6';
                        }
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c} 台'
                    }
                }
            ]
        };
        
        salesChart.setOption(salesOption);
        
        // 窗口大小改变时调整图表大小
        window.addEventListener('resize', function() {
            brandChart.resize();
            priceChart.resize();
            salesChart.resize();
        });
        
        // 选项卡切换时重新绘制图表
        const chartTabs = document.querySelectorAll('button[data-bs-toggle="tab"]');
        chartTabs.forEach(tab => {
            tab.addEventListener('shown.bs.tab', function() {
                if (this.id === 'brand-tab') {
                    brandChart.resize();
                } else if (this.id === 'price-tab') {
                    priceChart.resize();
                } else if (this.id === 'sales-tab') {
                    salesChart.resize();
                }
            });
        });
    });
</script>
{% endblock %} 